<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions">

<rich:panel header="Séléction des élèves">
	          		<h:panelGrid columns="3">
	          			<h:panelGroup>
	          				<h:outputLabel id="anneeLabel" for="annee"  value="Année scolaire" styleClass="label"/>
	          				<h:selectOneMenu id="anneescolaire"  value="#{GestionDesSaisiesControleur.modele.idAnneeScolaire}">
					        	<f:selectItem  itemLabel="Années scolaires" itemValue="" />
					        	<f:selectItems  value="#{GestionDesSaisiesControleur.modele.annesScolairesItems}"/>
				    		</h:selectOneMenu>
	          			</h:panelGroup>
	          		</h:panelGrid>
		             <h:panelGrid columns="3">
		             	<h:panelGroup>
		        			<h:outputLabel id="matriculeLabel" for="matricule"  value="Matricule" styleClass="label"/>
		        			<h:inputText id="matricule" value ="#{GestionDesSaisiesControleur.modele.critere.matricule}" />
		        		</h:panelGroup>	
		        		<h:panelGroup>
		        			<h:outputLabel id="nomFamilleLabel" for="nomFamille"  value="Nom de famille" styleClass="label"/>
		        			<h:inputText id="nomFamille" value ="#{GestionDesSaisiesControleur.modele.critere.nom}" />
		        		</h:panelGroup>	
		        	</h:panelGrid>
		         <div align="right">
				<h:panelGrid columns="2" >
					<h:commandButton  value="Lancer la recherche"  action="#{GestionDesSaisiesControleur.lancerRechercherEleve}" />
				</h:panelGrid>
			</div>
	        </rich:panel>
	       
	        <rich:panel header="La liste des élèves correspoandant à la recherche" 
	        	rendered="#{fn:length(GestionDesSaisiesControleur.modele.eleves) > 0 }"> 
		        <rich:dataTable id="elves" value="#{GestionDesSaisiesControleur.modele.eleves}" 	
		        		var="eleve" rows="5" >
		        	<rich:column >
							<f:facet name="header">
								<h:outputText value="" />
							</f:facet>
							<h:selectBooleanCheckbox id="selectPosition" value="#{eleve.flag}">
							</h:selectBooleanCheckbox>
					</rich:column>
					<rich:column>
						<f:facet name="header"><h:outputText value="Matricule" /></f:facet>
						<h:outputText value="#{eleve.matricule}" />
					</rich:column>
					<rich:column>
						<f:facet name="header"><h:outputText value="Prénom" /></f:facet>
						<h:outputText value="#{eleve.prenom}" />
					</rich:column>
					<rich:column>
						<f:facet name="header"><h:outputText value="Nom de famille" /></f:facet>
						<h:outputText value="#{eleve.nom}" />
					</rich:column>
					
		        </rich:dataTable>
	        </rich:panel>
	        <div class="navPanel" style="width:100%;">
        <a4j:commandButton style="float:right" value="Suivant &gt;&gt;">
            <rich:toggleControl targetItem="@next" event="click"/>
        </a4j:commandButton>
    </div>
</ui:composition>